<template>
  <div class="infinite-container">
  <section class="bgwhite mt20">
  <mu-text-field hintText="不允许超过200个字符" :errorText="multiLineInputErrorText" @textOverflow="handleMultiLineOverflow" multiLine :rows="10" v-model="input" :rowsMax="12" :maxLength="200"  labelFloat fullWidth/>
  </section>
  <section class="login mt20">
      <mu-raised-button label="发送" @click="submit" fullWidth primary class="btn-login">
        </mu-raised-button>
  </section>
  
  </div>
</template>

<script>
export default {
  mounted () {
    this.$store.commit('UPDATE_TITLE', '意见反馈')
  },
  data () {
    return {
      input: '',
      inputErrorText: '',
      multiLineInput: '',
      multiLineInputErrorText: ''
    }
  },
  methods: {
    handleInputOverflow (isOverflow) {
      this.inputErrorText = isOverflow ? '超过啦！！！！' : ''
    },
    handleMultiLineOverflow (isOverflow) {
      this.multiLineInputErrorText = isOverflow ? '超过啦！！！！' : ''
    },
    submit () {
      if (!this.input) {
        this.$store.commit('UPDATE_TOAST', {
          show: true,
          message: '说点什么吧'
        })
      } else {
          this.input = ''
        this.$store.commit('UPDATE_TOAST', {
          message: '感谢您的建议',
          fn: () => {
                  this.$router.replace('/setting')
          }
        })
      }
    }
  },
  destroyed () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style>
  
</style>
